<template>
  <div>
    <!--操作日志详细信息主题信息-->
    <div class="modal_body">
      <div class="rtu">
          <!--操作日志条件过滤-->
          <div class="searchform">
            <el-date-picker
              v-model="timeslot"
              type="daterange"
              align="right"
              size = mini
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              unlink-panels
              :range-separator="$t('tips.to')"
              :start-placeholder="$t('tips.startdate')"
              :end-placeholder="$t('tips.enddate')"
              :picker-options="pickerOptions">
            </el-date-picker>
          </div>
          <div class="searchform">
            <div class="syslogbar">
              <form class="ant-form">
                <el-input
                  type="text"
                  size="mini"
                  :placeholder="$t('title.tunnellightingsystem_systemmanagement_title_pleaseentertheoperatinguser')"
                  v-model="search"
                  @keyup.enter.native="refreshdata(1)"
                  class="ant-input"
                  clearable></el-input>
              </form>
            </div>
            <el-button class="el-button-amplify" size="mini" type="info" icon="el-icon-search" circle @click="refreshdata(1)"></el-button>
            <el-button class="export" size="mini" type="info" @click="exportExcel">{{$t('title.tunnellightingsystem_systemmanagement_title_systemlogexport')}}<i class="el-icon-sold-out el-icon--right"></i></el-button>
          </div>

      </div>
      <div class="clear"></div>
      <!--操作日志列表-->
      <div class="rtutable">
        <el-table
          ref="multipleTable"
          height="470"
          size="small"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :header-cell-style="tableHeaderStyle"
          class="subtable">
          <el-table-column
            type="index"
            :label="$t('table.index')"
            width="80"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="client"
            :label="$t('title.tunnellightingsystem_systemmanagement_title_client')"
            width="80"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="loginip"
            :label="$t('title.tunnellightingsystem_systemmanagement_title_host')"
            width="120"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="username"
            :label="$t('title.tunnellightingsystem_accountmanagement_title_username')"
            width="80"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="operatemodule"
            :label="$t('title.tunnellightingsystem_systemmanagement_title_module')"
            width="80"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="operateaction"
            :label="$t('title.tunnellightingsystem_systemmanagement_title_operationalinterface')"
            width="160"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="operateitem"
            :label="$t('title.tunnellightingsystem_systemmanagement_title_operationcontent')"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="operatetime"
            :label="$t('title.tunnellightingsystem_systemmanagement_title_operationtime')"
            sortable
            width="180"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="result"
            :label="$t('title.ending')"
            width="80"
            show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--分页功能-->
    <div class="modal_bottom">
      <el-pagination
        :small="true"
        :background="true"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        layout="total,sizes, prev, pager, next, jumper"
        :page-sizes="[15, 30, 60, 150, 300]"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "syslogform",
    data() {
      return {
        msg: "syslogclose",
        currentPage:1,
        perpage:15,
        total:0,
        tableData:[],
        starttime:'',
        endtime:'',
        pickerOptions: {
          shortcuts: [{
            text: this.$t('title.tunnellightingsystem_systemmanagement_title_lastweek'),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: this.$t('title.tunnellightingsystem_systemmanagement_title_lastmonth'),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: this.$t('title.tunnellightingsystem_systemmanagement_title_lastthreemonths'),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },


        filtervalue:'',
        filtername:'',
        search:'',
        timeslot: '',
      };
    },
    mounted() {//在模板编译完成后执行
      let that=this;
      this.inittimeslot();

      //获取系统操作日志信息
      depot.get({
          url:'/syslog/getsysloginfor.do',
          data:{'start':this.perpage*(this.currentPage-1)+1,'limit':this.perpage,'starttime':this.starttime,'endtime':this.endtime,'username':sessionStorage.username},
          cb:function (res) {
            if(res.totalCount >= 0)
            {
              that.total = res.totalCount;
              that.tableData = res.result;
              if(sessionStorage.lang==="zh-cn"){
                that.tableData.forEach((item)=>{item.client='网页端';item.result='成功'})
              }else{
                that.tableData.forEach((item)=>{item.client='Web';item.result='Success'})
              }
            }
            else
            {

            }
          }
      })
    },
    methods:{
      //设置表头行的样式
      tableHeaderStyle({row,column,rowIndex,columnIndex}){
        return 'background-color: #ffffff;color: #000000;font-size:14px'
      },
      //导出的方法
      exportExcel() {
        require.ensure([], () => {
          const { export_json_to_excel } = require('@/Excel/Export2Excel');
          const tHeader = ['客户端', '主机地址', '用户名', '操作模块','操作接口','操作内容','操作时间','结果'];

          // 上面设置Excel的表格第一行的标题
          const filterVal = ['client', 'loginip','username','operatemodule','operateaction','operateitem','operatetime','result'];
          // 上面的index、nickName、name是tableData里对象的属性
          const list = this.tableData;  //把data里的tableData存到list
          const data = this.formatJson(filterVal, list);
          if(sessionStorage.lang==="zh-cn"){
            export_json_to_excel(tHeader, data, '系统日志');
          }else{
            export_json_to_excel(filterVal, data, 'System Log');
          }
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      refreshdata(msg){
        if(msg == 1)
        {
          this.filtername = 'default'
          this.filtervalue = this.search
        }
        else
        {
          this.filtername = ''
        }
        this.DateTimeSlot();
        this.loading=true;
        var that=this;
        depot.get({
          url:'/syslog/getsysloginfor.do',
          data:{'start':this.perpage*(this.currentPage-1)+1,'limit':this.perpage,'starttime':this.starttime,'endtime':this.endtime,'username':sessionStorage.username,'filterTxt':this.filtername,'filterValue':this.filtervalue},
          cb:function (res) {
            if(res.totalCount >= 0)
            {
              that.total = res.totalCount;
              that.tableData = res.result;
              if(sessionStorage.lang==="zh-cn"){
                that.tableData.forEach((item)=>{item.client='网页端';item.result='成功'})
              }else{
                that.tableData.forEach((item)=>{item.client='Web';item.result='Success'})
              }
            }
            else
            {

            }
          }
        })
      },
      handleSizeChange(val) {

        this.perpage = val;
        this.refreshdata();
      },
      handleCurrentChange(val) {

        this.currentPage = val;
        this.refreshdata();
      },
      DateTimeSlot(){
        this.starttime = this.timeslot[0]
        this.endtime = this.timeslot[1]
        if(this.starttime == null || this.starttime == '')
        {
          this.inittimeslot();//初始化为近1个月操作日志
        }
      },
      inittimeslot(){
        //初始化为近1个月操作日志
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        this.endtime = this.FormatDate(end, "yyyy-MM-dd");
        this.starttime= this.FormatDate(start, "yyyy-MM-dd");
      }
    }
  }
</script>

<style scoped>
  .el-button-amplify{
    height:28px;
    margin-left: 5px;
  }

  .export{
    position: absolute;
    right: 20px;
  }
  .rtutable{
    margin-top: 10px;
    border-radius: 5px;
  }
  .search{
    position: relative;
    float:left ;
    margin-left: -200px;
  }
  .syslogbar{
    float:left;
    width: 350px;
    margin: auto 0px;
  }
  .modal_bottom{
    float:right;
    margin-right:500px;
    margin-top: 5px;
  }
  .rtutable >>> .el-table{
    background-color: #edeef0;
  }
  .subtable >>> .el-table__body-wrapper{
    background-color: #edeef0;
  }
  .subtable >>>.el-table__row{
    background-color: white;
    color:#000000;
  }
  .rtutable >>>.el-table tbody tr:hover>td {
    background-color: #edeef0 !important
  }
  .rtutable >>>.el-table td{
    padding: 4px 0;
    font-size: 12px;
    border-bottom: 0.1px solid #dddddd;
  }
  .rtutable >>>.el-table::before
  {

  }
  .rtutable >>>.el-table th.is-leaf{
    border-bottom: 0.1px solid #dddddd;
  }
  .subtable >>>.el-checkbox__input.is-checked .el-checkbox__inner{
    background-color: #3586ff;
  }
  .subtable>>>.el-checkbox__inner::after{
    border:2px solid #ffffff;
    border-left:0px;
    border-top:0px;
  }
  .modal_bottom>>>.el-input__inner{
    height:22px;
    background-color: #edeef0;
    color: #636363;
  }
  .modal_bottom>>>.el-pagination__total{
    color: #ffffff;
  }
  .modal_bottom>>>.el-pagination__jump{
    color: #ffffff;
  }
  .modal_bottom>>>.el-pagination.is-background .el-pager li{
    color: #636363;
    background-color: #fff;
  }
  .modal_bottom>>>.btn-prev{
    color: #636363;
    background-color: #fff;
  }
  .modal_bottom>>>.btn-next{
    color: #636363;
    background-color: #fff;
  }
  .modal_bottom>>>.el-popper{
    background-color: #18ab8f !important;
  }

  .modal_bottom >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #edeef0 !important;
  }
  .clear {
    clear: both;
  }
  .rtutable >>>.el-table th.gutter{
    display: table-cell !important;
  }
  .searchform>>>.el-range-editor.el-input__inner{
    padding:0px 10px;
  }
  .searchform>>>.el-range-editor--mini .el-range-separator{
    line-height: 26px;
  }
</style>
